<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Photo Gallery</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<link href="css/gallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
		
$('#gallery img').each(function(i) {
	var imgFile = $(this).attr('src');
	var preloadImage = new Image();
  var imgExt = /(\.\w{3,4}$)/;
  preloadImage.src = imgFile.replace(imgExt,'_h$1');
		
	$(this).hover(
		function() {
			$(this).attr('src', preloadImage.src);
		},
		function () {
		var currentSource=$(this).attr('src');
			$(this).attr('src', imgFile);
	});
});
	
	$('#gallery a').click(function(evt) {
		//don't follow link
		 evt.preventDefault();
		 //get path to new image
	   var imgPath = $(this).attr('href');
		 //get reference to old image
		 var oldImage = $('#photo img');
		 //check to see if they're the same image
		 if (imgPath == oldImage.attr('src')) { 
		 	//if they are then you're done
		 	return;
		 } else {
			 //remove highglight from previously clicked thumbnail
       $('.selected').removeClass('selected');		
			 //add highlight to this thumbnail
			 $(this).addClass('selected');
			 //create HTML for new image
			 var newImage = $('<img src="' + imgPath +'">');
			 //make new image invisible
			 newImage.hide();
			 //add to the #photo div
			 $('#photo').prepend(newImage);
			 //fade out old image and remove from DOM
			 oldImage.fadeOut(1000,function(){
		     $(this).remove();
				});
			 //fade in new image
			 newImage.fadeIn(1000);
		 }
	});
		
		$('#gallery a:eq(0)').click();
});
</script>
</head>
<body id="twoCol">
<div id="container">
  <div id="banner"><img src="../images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
  
  <div id="contentWrap">
  <div id="main">
  <h1>Photo Gallery  </h1>
  <div id="gallery"><a href="images/large/blue.jpg"><img src="images/small/blue.jpg" width="70" height="70" alt="Blue"></a><a href="images/large/yellow.jpg"><img src="images/small/yellow.jpg" width="70" height="70" alt="Yellow"></a><a href="images/large/green.jpg"><img src="images/small/green.jpg" width="70" height="70" alt="Green"></a><a href="images/large/orange.jpg"><img src="images/small/orange.jpg" width="70" height="70" alt="Orange"></a> <a href="images/large/purple.jpg"><img src="images/small/purple.jpg" width="70" height="70" alt="Purple"></a><a href="images/large/red.jpg"><img src="images/small/red.jpg" width="70" height="70" alt="Red"></a></div>
  <div id="photo">
 
  </div>
  <p class="credit">Photos by <a href="http://www.morguefile.com/forum/profile.php?username=alin">Alin Nan</a></p>
</div>
  <div id="sidebar">
    <h2>Script 7.2</h2>
</div>
  </div>
  <div id="footer"><em>&#8220;Building Interactive Web Sites with JavaScript&#8221;</em></div>
</div>
</body>
</html>
